<template>
  <div class="top-box">
    <div class="top-left">
      <a href="javascript:" v-for="item in toplist.topleft">{{item.topname}}</a>
    </div>
    <div class="top-right">
      <a href="javascript:" v-for="item in toplist.topright">{{item.rightname}}</a>
    </div>
    <div class="cart">
      <a href="javascript:"><i class="iconfont icon-gouwuche"></i>购物车(<span>0</span>)</a>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        toplist: {
          topleft: [{
              topname: "小米商城"
            },
            {
              topname: "MIUI"
            },
            {
              topname: "loT"
            },
            {
              topname: "云服务"
            },
            {
              topname: "金融"
            },
            {
              topname: "有品"
            },
            {
              topname: "小爱开放平台"
            },
            {
              topname: "企业团购"
            },
            {
              topname: "资质证照"
            },
            {
              topname: "协议规则"
            },
            {
              topname: "下载app"
            },
            {
              topname: "Select Location"
            }
          ],
          topright: [{
              rightname: "登陆"
            }, {
              rightname: "注册"
            },
            {
              rightname: "消息通知"
            }
          ]
        }
      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped">
  @import url("http://at.alicdn.com/t/font_1442943_asb98bs4cpc.css");

  .top-box {

    position: relative;
    height: 2.8rem;
    background-color: #333;
  }

  .top-box .top-left {
    position: absolute;
    top: 0.325rem;
    left: 10.625rem;
  }

  .top-box .top-left a {
    display: block;
    color: #B0B0B0;
    font-size: 0.75rem;
    line-height: 2rem;
    border-right: 0.0625rem solid #424242;
    padding-right: 0.5125rem;
    padding-left: 0.5125rem;
    float: left;
  }

  .top-box .top-left a:last-child {
    border: none;
  }

  .top-box .top-left a:hover {
    cursor: pointer;
    color: #FFFFFF;
  }

  .top-box .top-right {

    position: absolute;
    top: 0.325rem;
    right: 20.375rem;
  }

  .top-box .top-right a {
    display: block;
    color: #B0B0B0;
    font-size: 0.75rem;
    line-height: 2rem;
    border-right: 0.0625rem solid #424242;
    padding-right: 0.5125rem;
    padding-left: 0.5125rem;
    float: left;
  }

  .top-box .top-right a:nth-child(3) {
    border: none;
  }

  .top-box .top-right a:hover {
    cursor: position;
    color: #FFFFFF;
  }

  .top-box .cart {
    position: absolute;
    right: 10.625rem;
    background-color: #424242;
  }

  .top-box .cart a {
    display: block;
    width: 7.5rem;
    height: 2.7rem;
    text-align: center;
    line-height: 2.5rem;
    color: #B0B0B0;
  }

  .top-box .cart a i {
    margin-right: 0.425rem;
  }
</style>
